<template>
  <div class="active-all">
    <choiceDate @getDate="getDate"/>
    <div class="table-box">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="120">
          <template slot-scope="scope">
            <span>{{tableFormatDate(scope.row.date)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="趣游戏活跃">
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.appLogin}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="安卓">
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.androidAppLogin}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="IOS">
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.iosAppLogin}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="使用启动器">
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.launchGame}}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <span>点击趣组队tab</span>
            <el-tooltip class="item" effect="dark" content="点击趣组队tab的数据=安卓点击+iOS活跃（安卓用户首页为启动器，iOS用户首页为趣组队）" placement="bottom">
              <i class="el-icon-warning theme-color"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.clickTeamButton}}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <span>组队活跃</span>
            <el-tooltip class="item" effect="dark" content="组队活跃定义：点过“快速入队”或“建房”或编辑入队卡" placement="bottom">
              <i class="el-icon-warning theme-color"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.reportActiveTeamData.teamActive}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import choiceDate from '../choiceDate'
export default {
  components: {
    choiceDate
  },
  props: {
    tabIndex: {
      type: String,
      default: ''
    },
    activeTab: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      date: [],
      pickerOptions: {
          disabledDate (time) {
              return time.getTime() > Date.now()
          }
      },
      tableData: []
    }
  },
  watch: {
    tabIndex: {
      handler: function (index) {
        if (index === '2') {
          this.setDate()
          this.getData()
        }
      },
      immediate: true
    },
    activeTab: {
      handler: function (index) {
        if (index === '1') {
          // this.setDate()
          this.getData()
        }
      },
      immediate: true
    }
  },
  created () {
    this.setDate()
  },
  methods: {
    setDate () {
      let start = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 14, 'YYYY-MM-DD')
      let end = formatDate(new Date(), 'YYYY-MM-DD')
      this.date = [start, end]
    },
    getDate (date) {
      this.date = date
      this.getData()
    },
    async getData () {
      let params = {
        type: 1
      }
      if (this.date && this.date.length) {
        params.fromDate = this.date[0] + ' 00:00:00'
        params.toDate = this.date[1] + ' 23:59:59'
      }
      this.loading = true
      let res = await this.$http.post('/team/teamActiveData', params)
      if (res.code === '0') {
          this.tableData = res.data
      } else {
          this.$message({
              type: 'error',
              message: '系统异常，请稍后再试'
          })
      }
      this.loading = false
    },
    // 时间转换
    tableFormatDate (time) {
        return formatDate(time, 'YYYY-MM-DD')
    }
  }
}
</script>
<style lang="scss" scoped>
  .date{
    span{
      margin-right: 10px;
      font-size: 14px;
    }
  }
  .table-box{
    margin-top: 20px;
  }
  .theme-color{
    color: #409eff;
    margin-left: 5px;
    font-size: 16px;
  }
</style>
